<template>
    <div class="d1">
        <van-icon name="arrow-left" size="25" class="i1" @click="back"/>
        <div class="d2">
          <span>我的派件</span>
        </div>
       <van-icon name="search" size="25" class="i2" @click="search"/><br>
       <van-tabs :v-model="active" animated title-active-color="#68D6FF"
                 title-inactive-color="black" color="#68D6FF">
           <van-tab name="3" title="滞留件">
             <br>
              <div>
                <div class="d3">
                  <div
                      v-for="item in list1"
                  >
                  <van-cell is-link arrow-direction="up">
                    <!-- 使用 title 插槽来自定义标题 -->
                    <template #title>
                      <span>
                          <img src="../../img/快递柜.svg" alt="" class="im1"/>&emsp;&emsp;&emsp;
                          <span class="sp3">{{item.machineCode}}</span><span class="sp2">&emsp;(1)</span><br><br>
                          <span class="sp9">{{item.location}}</span>
                      </span>
                    </template>
                  </van-cell><br>
                  </div>
                  <van-divider/>
                </div>
              </div>
             <div
                 v-for="item in list1"
             >
               <van-cell value="详情" is-link center value-class="detail" @click="detail(item.id)">
                 <!-- 使用 title 插槽来自定义标题 -->
                 <template #title>
                   <span class="custom-title">
                     <div class="d5">
                       <img src="../../img/快递.svg" alt="" class="im2"/>
                     </div>
                     <div class="d6">
                        <span>{{item.status==3?"滞留件":""}}</span><span class="sp1">&emsp;(超过{{parseInt(require('moment')(new Date()).diff(require('moment')(form.timestamp),'hours',false)/24)}}天未取)</span><br>
                        <span class="sp4">{{item.phone}}</span>
                     </div>
                   </span>
                 </template>
               </van-cell>
               <div style="background-color: white" >
                 <van-cell title="费用类型" value="单笔收费" :border="false"/>
                 <van-cell title="包裹单号" :border="false">{{item.baoguoid}}</van-cell>
                 <van-cell title="派件时间">{{item.timestamp}}</van-cell>
                 <van-button type="default" class="btn1" @click="chong">重发取件码</van-button>
               </div>
               <br>
           </div>
           </van-tab>
         <van-tab name="1" title="待顾客取件">
           <br>
           <div>
             <div class="d3">
               <div
                   v-for="item in list2"
               >
               <van-cell is-link arrow-direction="up">
                 <!-- 使用 title 插槽来自定义标题 -->
                 <template #title>
                      <span>
                          <img src="../../img/快递柜.svg" alt="" class="im1"/>&emsp;&emsp;&emsp;
                          <span class="sp3">{{item.machineCode}}</span><span class="sp2">&emsp;(1)</span><br><br>
                          <span class="sp9">{{item.location}}</span>
                      </span>
                 </template>
               </van-cell>
                 <br>
               </div>
             </div>
           </div>
           <div
               v-for="item in list2"
           >
             <van-cell value="详情" is-link center value-class="detail" @click="detail(item.id)">
               <!-- 使用 title 插槽来自定义标题 -->
               <template #title>
                   <span class="custom-title">
                     <div class="d5">
                       <img src="../../img/快递.svg" alt="" class="im2"/>
                     </div>
                     <div class="d6">
                        <span class="sp5">{{item.status==1?"待取件":""}}</span><br>
                        <span class="sp4">{{item.phone}}</span>
                     </div>
                     <van-divider/>
                   </span>
               </template>
             </van-cell>
             <div>
               <van-cell title="费用类型" value="单笔收费" :border="false"/>
               <van-cell title="包裹单号" :border="false">{{item.baoguoid}}</van-cell>
               <van-cell title="派件时间" :border="false">{{item.timestamp}}</van-cell>
             </div>
             <br>
           </div>
         </van-tab>
         <van-tab name="6" title="已完结">
           <br>
           <div
               v-for="item in list3"
           >
             <van-notice-bar :scrollable="false" v-if="item.status==6">第{{item.num}}次派件成功</van-notice-bar>
             <van-cell value="详情" is-link center value-class="detail" @click="detail(item.id)">
               <!-- 使用 title 插槽来自定义标题 -->
               <template #title>
                   <span class="custom-title">
                     <div class="d5">
                       <img src="../../img/快递.svg" alt="" class="im2"/>
                     </div>
                     <div class="d6">
                        <span class="sp5">{{item.status==6?"已取件":"已撤回"}}</span><br>
                        <span class="sp4">{{item.phone}}</span>
                     </div>
                     <van-divider/>
                   </span>
               </template>
             </van-cell>
             <div>
               <van-cell title="费用类型" value="单笔收费" :border="false"/>
               <van-cell title="包裹单号" :border="false">{{item.baoguoid}}</van-cell>
               <van-cell title="派件时间" :border="false">{{item.timestamp}}</van-cell>
               <van-cell title="柜机编号" :border="false">{{item.machineCode}}</van-cell>
               <van-cell title="柜机地址" :border="false">{{item.location}}</van-cell>
             </div>
             <br>
           </div>
         </van-tab>
       </van-tabs>
    </div>
</template>

<script>
import axios from "axios";
export default {
  name: 'Index',
  data() {
    return {
       active: 3,
       list1:[],
       list2:[],
       list3:[],
       id:'',
       form:{}
    };
  },
  methods:{
    search(){
      this.$router.push({
        path: '/parceltracking/ParcelTracking'
      })
    },
    back(){
      this.$router.push({
        path: '/home/Home'
      })
    },
    findList(){
      console.log(this.form.deliveryid)
      axios.get("http://localhost:11219/dspatch/package/list/"+this.form.deliveryid).then(res=>{
        if(res.status==200){
          this.list1=res.data.list[0];
          this.list2=res.data.list[1];
          this.list3=res.data.list[2];
        }
      })
    },
    chong() {
      axios.get("http://localhost:8401/user/sendSms/" + this.form.phone);
    },
    detail(id){
      this.$router.push({
        path: '/index/Detail',
        query: {
          active: this.active,
          id:id
        }
      });
    }
  },
  created() {
    var login = JSON.parse(localStorage.getItem('login'));
    let id = login.id;
    console.log(id);
    axios.get("http://localhost:11219/dspatch/package/"+id).then(res=>{
      if(res.status==200){
        this.form=res.data;
        console.log(this.form);
        this.findList();
      }
    })
  },
};
</script>

<style scoped>
    .d1{
      position: relative;
    }
    .d2{
      margin-top: 22px;
      margin-left: 12px;
    }
    .i1{
      position: absolute;
      top: 0;
      left: 0;
      margin-left: 10px;
      margin-top: 2px;
    }
    .i2{
      position: absolute;
      top: 0;
      right: 0;
      margin-right: 10px;
      margin-top: 2px;
    }
    .sp2{
      color: #68D6FF;
    }
    .im1{
       margin-left: 130px;
       margin-top: 18px;
       float: left;
       width: 9%;
       height: 43px;
    }
    .im2{
      margin-right: 21px;
      margin-top: 0;
      width: 51%;
      height: 17px;
      border: none;
    }
    .d5{
      margin-left: 12px;
      margin-top: 14px;
      float: left;
    }
    .d3{
      float: right;
      width: 500px;
    }
    .sp3{
       margin-right: 60px;
    }
    .d6{
      width: 202px;
    }
    .detail{
      color: blue !important;
    }
    .sp4{
      margin-left: -59px;
    }
    .btn1{
      margin-left: 200px;
    }
    .sp5{
      margin-right: 102px;
    }
    .sp9{
      margin-left: -4px;
    }
</style>
